<template>
  <!--访客数据展示-->
  <div class="contentRight" style="background-color: #f0f2f5;height: auto;min-height: 100%;">
    <div class="zhezhaoContentRight" v-if="loadingAllPosition">
      <a-spin tip="加载中..." style="position: fixed;top: 50%;">
      </a-spin>
    </div>
    <div class="zhezhaoContentRight" v-if="allMessageNull != ''">
      <div style="position: fixed;top: 50%;">
        {{allMessageNull}}
      </div>
    </div>
    <a-row :gutter="[10,10]" style="margin: 0 !important;padding-bottom: 10px;">
      <a-col class="gutter-row" :span="12"  v-if="allDataShow && isSuper == '是'">
        <div class="gutter-box whiteColor" >
            <div style="height: 20px"></div>
            <h3 class="sflTitle" >舍弗勒大中华区访客系统实时数据显示</h3>
            <div style="height: 413px; max-height: 413px; background-color: #fff;">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <p style="font-size: 20px;margin-bottom: 0;">今日预约人数</p>
                <a-statistic
                  title=""
                  :value="allCount.allCountNum"
                  suffix="人"
                  class="demo-class"
                >
                </a-statistic>
              </a-card>

              <a-card size="small" :bordered="false">
                <!--顶部统计-->
                <a-row :gutter="10">
                  <a-col :span="8">
                    <a-card size="small" :bordered="false" style="text-align: center;">
                      <a-statistic
                        title="访问中"
                        :value="allCount.notOutCount"
                        suffix="人"
                        class="demo-class"
                      >
                      </a-statistic>
                    </a-card>
                  </a-col>
                  <a-col :span="8">
                    <a-card size="small" :bordered="false" style="text-align: center;">
                      <a-statistic
                        title="访问结束"
                        :value="allCount.endOfVisit"
                        suffix="人"
                        class="demo-class"
                      >
                      </a-statistic>
                    </a-card>
                  </a-col>
                  <a-col :span="8">
                    <a-card size="small" :bordered="false" style="text-align: center;">
                      <a-statistic
                        title="未到访"
                        :value="allCount.notVisited"
                        suffix="人"
                        class="demo-class"
                      >
                      </a-statistic>
                    </a-card>
                  </a-col>
                </a-row>
              </a-card>
              <div style="position: relative;min-height: 200px">
                <!--自定义加载中-->
                <div class="zhezhaoBase" v-if="loadingAll">
                  <a-spin tip="加载中...">
                  </a-spin>
                </div>

                <div v-else>
                  <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex"
                       v-if="allBaseData.length == 0">
                    <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;"
                         class="flex">此区域未查询到数据
                    </div>
                  </div>
                  <!--图表-->
                  <div v-else id="container" class="charthuan" style="width: 90%;"></div>
                </div>
              </div>
            </div>

        </div>
      </a-col>
      <a-col class="gutter-row" :span="12"  v-show="antingShow">
        <div class="gutter-box whiteColor" >
          <a-card size="small" title="安亭基地" :bordered="false" :bodyStyle="{height:'450px',maxHeight:'450px'}">
            <template slot="extra">
              <a-dropdown>
                <a class="ant-dropdown-link menuA">
                  {{antingAreaName}}
                  <a-icon type="down"/>
                </a>
                <a-menu slot="overlay" @click="handleClickAnTing">
                  <a-menu-item class="menuA" v-for="item in aningAreaAll" :key="item.id" :value="item.name">
                    {{item.name}}
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>

            <!--顶部统计-->
            <a-row :gutter="10">
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="今日预约人数"
                      :value="antingCount.allCountNum"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问中"
                      :value="antingCount.notOutCount"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问结束"
                      :value="antingCount.endOfVisit"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="未到访"
                      :value="antingCount.notVisited"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
            </a-row>

            <div style="position: relative;min-height: 300px">
              <!--自定义加载中-->
              <div class="zhezhaoBase" style="top: 0" v-if="loadingAnting">
                <a-spin tip="加载中...">
                </a-spin>
              </div>

              <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex"
                   v-if="antingData.length == 0">
                <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;"
                     class="flex">此区域未查询到数据
                </div>
              </div>
              <!--图表-->
              <div v-else id="antingContainer" class="chartzhu330"></div>
            </div>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="12"  v-show="taicangShow">
        <div class="gutter-box whiteColor" >
          <a-card size="small" title="太仓基地" :bordered="false" :bodyStyle="{height:'450px',maxHeight:'450px'}">
            <template slot="extra">
              <a-dropdown>
                <a class="ant-dropdown-link menuA">
                  {{taicangAreaName}}
                  <a-icon type="down"/>
                </a>
                <a-menu slot="overlay" @click="handleClickTaiCang">
                  <a-menu-item class="menuA" v-for="item in taicangAreaAll" :key="item.id" :value="item.name">
                    {{item.name}}
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>

            <!--顶部统计-->
            <a-row :gutter="10">
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <a-statistic
                    title="今日预约人数"
                    :value="taicnagCount.allCountNum"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <a-statistic
                    title="访问中"
                    :value="taicnagCount.notOutCount"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <a-statistic
                    title="访问结束"
                    :value="taicnagCount.endOfVisit"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <a-statistic
                    title="未到访"
                    :value="taicnagCount.notVisited"
                    suffix="人"
                    class="noOutCount"
                  >
                  </a-statistic>
                </a-card>
              </a-col>
            </a-row>


            <div style="position: relative;min-height: 300px">
              <!--自定义加载中-->
              <div class="zhezhaoBase" style="top: 0" v-if="loadingTaicang">
                <a-spin tip="加载中...">
                </a-spin>
              </div>

                <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex"
                     v-if="taicangData.length == 0">
                  <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;"
                       class="flex">此区域未查询到数据
                  </div>
                </div>
                <!--图表-->
                <div v-else id="containerTaiCang" class="chartzhu330"></div>
            </div>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="12" v-show="yinchuanShow">
        <div class="gutter-box whiteColor" >
          <a-card size="small" title="银川基地" :bordered="false" :bodyStyle="{height:'450px',maxHeight:'450px'}">
            <template slot="extra">
              <a-dropdown>
                <a class="ant-dropdown-link menuA">
                  {{yinchuanAreaName2}}
                  <a-icon type="down"/>
                </a>
                <a-menu slot="overlay" @click="handleClickYinchuan">
                  <a-menu-item class="menuA" v-for="item in yinchuanAreaAll" :key="item.id" :value="item.name">
                    {{item.name}}
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>

            <!--顶部统计-->
            <a-row :gutter="10">
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="今日预约人数"
                      :value="yinchuanCount.allCountNum"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问中"
                      :value="yinchuanCount.notOutCount"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问结束"
                      :value="yinchuanCount.endOfVisit"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="未到访"
                      :value="yinchuanCount.notVisited"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>

            </a-row>


            <div style="position: relative;min-height: 300px">
              <!--自定义加载中-->
              <div class="zhezhaoBase" style="top: 0" v-if="loadingYinchuan">
                <a-spin tip="加载中...">
                </a-spin>
              </div>

                <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex"
                     v-if="yinchuanData.length == 0">
                  <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;"
                       class="flex">此区域未查询到数据
                  </div>
                </div>
                <!--图表-->
                <div v-else id="containerYinchuan2" class="chartzhu330"></div>
            </div>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="12" v-show="xiangtanShow">
        <div class="gutter-box whiteColor" >
          <a-card size="small" title="湘潭基地" :bordered="false" :bodyStyle="{height:'450px',maxHeight:'450px'}">
            <template slot="extra">
              <a-dropdown>
                <a class="ant-dropdown-link menuA">
                  {{xiangtanAreaName}}
                  <a-icon type="down"/>
                </a>
                <a-menu slot="overlay" @click="handleClickXiangtan">
                  <a-menu-item class="menuA" v-for="item in xiangtanAreaList" :key="item.id" :value="item.name">
                    {{item.name}}
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>

            <!--顶部统计-->
            <a-row :gutter="10">
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="今日预约人数"
                      :value="xiangtanCount.allCountNum"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问中"
                      :value="xiangtanCount.notOutCount"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问结束"
                      :value="xiangtanCount.endOfVisit"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="未到访"
                      :value="xiangtanCount.notVisited"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>

            </a-row>


            <div style="position: relative;min-height: 300px">
              <!--自定义加载中-->
              <div class="zhezhaoBase" style="top: 0" v-if="loadingXiangtan">
                <a-spin tip="加载中...">
                </a-spin>
              </div>

                <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex"
                     v-if="xiangtanData.length == 0">
                  <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;"
                       class="flex">此区域未查询到数据
                  </div>
                </div>
                <!--图表-->
                <div v-else id="containerXiangtan" class="chartzhu330"></div>
            </div>
          </a-card>
        </div>
      </a-col>

      <a-col class="gutter-row" :span="12" v-show="nanjingShow">
        <div class="gutter-box whiteColor" >
          <a-card size="small" title="南京基地" :bordered="false" :bodyStyle="{height:'450px',maxHeight:'450px'}">
            <template slot="extra">
              <a-dropdown>
                <a class="ant-dropdown-link menuA">
                  {{nanjingAreaName}}
                  <a-icon type="down"/>
                </a>
                <a-menu slot="overlay" @click="handleClickNanjing">
                  <a-menu-item class="menuA" v-for="item in nanjingAreaList" :key="item.id" :value="item.name">
                    {{item.name}}
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>

            <!--顶部统计-->
            <a-row :gutter="10">
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="今日预约人数"
                      :value="nanjingCount.allCountNum"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问中"
                      :value="nanjingCount.notOutCount"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问结束"
                      :value="nanjingCount.endOfVisit"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="未到访"
                      :value="nanjingCount.notVisited"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>

            </a-row>


            <div style="position: relative;min-height: 300px">
              <!--自定义加载中-->
              <div class="zhezhaoBase" style="top: 0" v-if="loadingNanjing">
                <a-spin tip="加载中...">
                </a-spin>
              </div>

                <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex"
                     v-if="nanjingData.length == 0">
                  <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;"
                       class="flex">此区域未查询到数据
                  </div>
                </div>
                <!--图表-->
                <div v-else id="containerNanjing" class="chartzhu330"></div>
            </div>
          </a-card>
        </div>
      </a-col>

      <a-col class="gutter-row" :span="12" v-show="suzhouShow">
        <div class="gutter-box whiteColor" >
          <a-card size="small" title="苏州基地" :bordered="false" :bodyStyle="{height:'450px',maxHeight:'450px'}">
            <template slot="extra">
              <a-dropdown>
                <a class="ant-dropdown-link menuA">
                  {{suzhouAreaName}}
                  <a-icon type="down"/>
                </a>
                <a-menu slot="overlay" @click="handleClickSuzhou">
                  <a-menu-item class="menuA" v-for="item in suzhouAreaList" :key="item.id" :value="item.name">
                    {{item.name}}
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>

            <!--顶部统计-->
            <a-row :gutter="10">
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="今日预约人数"
                      :value="suzhouCount.allCountNum"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问中"
                      :value="suzhouCount.notOutCount"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="访问结束"
                      :value="suzhouCount.endOfVisit"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" :bordered="false" style="text-align: center;">
                  <div class="flex1">
                    <a-statistic
                      title="未到访"
                      :value="suzhouCount.notVisited"
                      suffix="人"
                      class="demo-class"
                    >
                    </a-statistic>
                  </div>
                </a-card>
              </a-col>

            </a-row>


            <div style="position: relative;min-height: 300px">
              <!--自定义加载中-->
              <div class="zhezhaoBase" style="top: 0" v-if="loadingSuzhou">
                <a-spin tip="加载中...">
                </a-spin>
              </div>

              <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex"
                   v-if="suzhouData.length == 0">
                <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;"
                     class="flex">此区域未查询到数据
                </div>
              </div>
              <!--图表-->
              <div v-else id="containerSuzhou" class="chartzhu330"></div>
            </div>
          </a-card>
        </div>
      </a-col>

    </a-row>

  </div>
</template>

<script>
  import reservationApi from "@/api/reservation";
  import adminsDefinitionApi from "@/api/visitorSystem/adminsDefinition";
  import {Chart, registerTheme} from '@antv/g2';
  registerTheme('newTheme', {minColumnWidth:10,maxColumnWidth:10});

  export default {
    components: {},
    name: '',
    data() {
      return {
        loadingAllPosition: true,  //总遮罩
        allMessageNull: "", //总数据为空
        baceType: [],   //所有基地
        isSuper:"",  //是否是超级管理员

        antingAreaName: "按区域",
        antingAreaId: 1,
        aningAreaAll: [
          {id: 1, name: "按区域"},
          {id: 3, name: "按来访事由"},
        ],
        loadedAnting: 1,
        antingData: [],
        loadingAnting: false,
        antingChart: null,  //安亭数据图形对象
        antingShow:true,
        unapprovedNumbers: 0, //安亭未审批人数
        visitorsNumbers: 0, //安亭到访总人数
        reservationsNumbers: 0, //安亭预约总人数
        antingVisitingNumbers: 0, //安亭访问中人数
        antingCount: {
          allCountNum: 0, //今日预约人数
          endOfVisit: 0,  //今日访问结束人数
          notVisited: 0,  //今日未到访人数
          notOutCount: 0,  //今日访问中人数
        },

        // 所有基地汇总数据
        loadedAll: 1,
        allDataShow:true,
        loadingAll: false,
        allBaseData: [],
        allBaseChart: null,  //安亭数据图形对象
        reservationsAllNumbers: 0, //所有基地预约总人数
        visitorsAllNumbers: 0, //所有基地到访总人数
        unapprovedAllNumbers: 0, //所有基地未审批人数
        allVisitingNumbers: 0, //所有基地访问中人数
        allCount: {
          allCountNum: 0, //今日预约人数
          endOfVisit: 0,  //今日访问结束人数
          notVisited: 0,  //今日未到访人数
          notOutCount: 0,  //今日访问中人数
        },

        intervalId: null,   //定时器，定时刷新页面


        // 银川基地
        loadedYinchuan: 1,
        loadingYinchuan: false,
        ycunapprovedNumbers: 0, //银川未审批人数
        ycvisitorsNumbers: 0, //银川到访总人数
        ycreservationsNumbers: 0, //银川预约总人数
        yinchuanVisitingNumbers: 0, //银川访问中人数
        yinchuanData: [],
        yinchuanAreaList: [],
        yinchuanShow: true,
        yinchanChart: null,  //银川数据图形对象
        yinchuanCount: {
          allCountNum: 0, //今日预约人数
          endOfVisit: 0,  //今日访问结束人数
          notVisited: 0,  //今日未到访人数
          notOutCount: 0,  //今日访问中人数
        },
        yinchuanAreaName2: "按区域",
        yinchuanAreaId2: 1,
        yinchuanAreaAll: [
          {id: 1, name: "按区域"},
          {id: 3, name: "按来访事由"},
        ],

        // 太仓基地
        taicangData: [
          // { name: '到访人数', areaOrDoor: '二厂', count: 12 },
          // { name: '到访人数', areaOrDoor: '三厂', count: 23 },
          // { name: '到访人数', areaOrDoor: '四厂', count: 23 },
          // { name: '到访人数', areaOrDoor: '五厂', count: 0 },
          // { name: '到访人数', areaOrDoor: '六厂', count: 0 },
          // { name: '到访人数', areaOrDoor: '七厂', count: 0 },
          //
          // { name: '预约人数', areaOrDoor: '二厂', count: 18 },
          // { name: '预约人数', areaOrDoor: '三厂', count: 28 },
          // { name: '预约人数', areaOrDoor: '四厂', count: 18 },
          // { name: '预约人数', areaOrDoor: '五厂', count: 0 },
          // { name: '预约人数', areaOrDoor: '六厂', count: 0 },
          // { name: '预约人数', areaOrDoor: '七厂', count: 28 },
        ],
        taicangAreaName: "按区域",
        taicangAreaId: 1,
        taicangAreaAll: [
          {id: 1, name: "按区域"},
          {id: 2, name: "按门"},
          {id: 3, name: "按来访事由"},
        ],
        loadedTaicang: 1,
        taicangShow: true,
        loadingTaicang: false,
        taicangChart: null,  //太仓数据图形对象
        noApproveCount: 0, //太仓未审批人数
        daofangCount: 0, //太仓到访总人数
        yuyueCount: 0, //太仓预约总人数
        noOutCount: 0, //银川访问中人数
        taicnagCount: {
          allCountNum: 0, //今日预约人数
          endOfVisit: 0,  //今日访问结束人数
          notVisited: 0,  //今日未到访人数
          notOutCount: 0,  //今日访问中人数
        },

        // 湘潭模块
        xiangtanAreaName: "按区域",
        xiangtanAreaId2: 1,
        xiangtanAreaList: [
          {id: 1, name: "按区域"},
          {id: 3, name: "按来访事由"},
        ],
        xiangtanData: [],
        xiangtanShow: true,
        loadedXiangtan: 1,
        loadingXiangtan: false,
        xiangtanChart: null,  //银川数据图形对象
        xiangtanCount: {
          allCountNum: 0, //今日预约人数
          endOfVisit: 0,  //今日访问结束人数
          notVisited: 0,  //今日未到访人数
          notOutCount: 0,  //今日访问中人数
        },

        // 南京模块 20005
        nanjingAreaName: "按区域",
        nanjingAreaId: 1,
        nanjingAreaList: [
          {id: 1, name: "按区域"},
          {id: 3, name: "按来访事由"},
        ],
        nanjingData: [],
        nanjingShow: true,
        loadedNanjing: 1,
        loadingNanjing: false,
        nanjingChart: null,  //银川数据图形对象
        nanjingCount: {
          allCountNum: 0, //今日预约人数
          endOfVisit: 0,  //今日访问结束人数
          notVisited: 0,  //今日未到访人数
          notOutCount: 0,  //今日访问中人数
        },

        // 苏州模块 20006
        suzhouAreaName: "按区域",
        suzhouAreaId: 1,
        suzhouAreaList: [
          {id: 1, name: "按区域"},
          {id: 3, name: "按来访事由"},
        ],
        suzhouData: [],
        suzhouShow: true,
        loadedSuzhou: 1,
        loadingSuzhou: false,
        suzhouChart: null,  //银川数据图形对象
        suzhouCount: {
          allCountNum: 0, //今日预约人数
          endOfVisit: 0,  //今日访问结束人数
          notVisited: 0,  //今日未到访人数
          notOutCount: 0,  //今日访问中人数
        },


      }
    },
    beforeMount() {
      // this.aningAreaAll = reservationApi.getAningAreaAll();
      // this.getAntingAreaList();   //获取安亭区域
      // this.getYinchuanAreaList();   //获取银川区域
    },
    created() {
      // 定时更新页面数据
      this.dataRefreh();
      // 捕获滚动事件隐藏DOM
      window.addEventListener("scroll", this.pageScroll, true);
    },
    destroyed() {
      // 在页面销毁后，清除计时器
      this.clear();
      window.removeEventListener("scroll", this.pageScroll, true);
    },
    async mounted() {
      // this.fristLoad();
      await this.checkIsSuper();

    },
    methods: {
      pageScroll() {
        const warp = document.getElementById('antv-text-extension')
        if (!warp) return
        warp.style.display = 'none'
      },
      //查询登陆人是否是超级管理员
      checkIsSuper() {
        adminsDefinitionApi.checkIsSuper().then(res=>{
          if (res.data.success) {
            this.isSuper = res.data.result.isSuper;
            // 获取基地信息
            this.findRegionList();
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      // 根据权限获取基地信息
      async findRegionList() {
        this.loadingAllPosition = true;
        let resp = await reservationApi.getBdSysItemList({typeId: 200});
        if (resp.data.success) {
          this.baceType = resp.data.result;
          let ids = this.baceType.map(el=>{return el.id});
          if (this.baceType == 0 || this.baceType == null){
            // 隐藏所有模块
            this.allBaseData = [];
            this.antingData =[];
            this.taicangData =[];
            this.yinchuanData =[];
            this.xiangtanData =[];
            this.nanjingData =[];
            this.suzhouData =[];
            // this.allDataShow = false;
            // this.antingShow = false;
            // this.taicangShow = false;
            // this.yinchuanShow = false;
            // this.xiangtanShow = false;
            // this.nanjingShow = false;
            this.allMessageNull = "未获取到可用数据";
          } else {
            if (ids.length > 0 && this.isSuper == '是'){
              // this.getAllVisitCase();
              this.allDataShow = true;
            } else {
              this.allDataShow = false;
            }
            for (let i = 0; i < this.baceType.length; i++) {
              let item = this.baceType[i];
              if (ids.indexOf(100) > -1){
                if(item.id == 100){
                  // this.getAntingVisitCase();
                  this.antingShow = true;
                }
              } else {
                this.antingShow = false;
              }
              if(ids.indexOf(20003) > -1){
                if(item.id == 20003){
                  // this.getTaiCangVisitCase();
                  this.taicangShow = true;
                }
              } else {
                this.taicangShow = false;
              }
              if(ids.indexOf(102) > -1){
                if(item.id == 102){
                  // this.getYinchuanVisitCase();
                  this.yinchuanShow = true;
                }
              } else {
                this.yinchuanShow = false;
              }
              if(ids.indexOf(20004) > -1){
                if(item.id == 20004){
                  // this.getYinchuanVisitCase();
                  this.xiangtanShow = true;
                }
              } else {
                this.xiangtanShow = false;
              }
              if(ids.indexOf(20005) > -1){
                if(item.id == 20005){
                  this.nanjingShow = true;
                }
              } else {
                this.nanjingShow = false;
              }
              if(ids.indexOf(20006) > -1){
                if(item.id == 20006){
                  this.suzhouShow = true;
                }
              } else {
                this.suzhouShow = false;
              }

            }

            this.$nextTick(()=>{
              this.fristLoad();
            })

          }
        } else {
          this.loadingAllPosition = false;
          this.allBaseData = [];
          this.antingData =[];
          this.taicangData =[];
          this.yinchuanData =[];
          this.xiangtanData =[];
          this.nanjingData =[];
          this.suzhouData =[];
          this.allDataShow = false;
          this.antingShow = false;
          this.taicangShow = false;
          this.yinchuanShow = false;
          this.xiangtanShow = false;
          this.nanjingShow = false;
          this.suzhouShow = false;
          this.allMessageNull = resp.data.message;
          // this.$message.error(resp.data.message);
        }
      },
      // 获取安亭基地的区域
      async getAntingAreaList() {
        let res = await reservationApi.getVisitorTypeAreaList({typeId: 100})
        // console.log(res.data);
        if (res.data.success) {
          this.aningAreaAll = [{areaName: "全部", id: ""}];
          this.aningAreaAll = [...this.aningAreaAll, ...res.data.result];
          // console.log(this.aningAreaAll);
        } else {
          this.$message.error(res.data.message);
        }

      },
      // 获取银川基地的区域
      async getYinchuanAreaList() {
        let res = await reservationApi.getVisitorTypeAreaList({typeId: 102})
        // console.log(res.data);
        if (res.data.success) {
          this.yinchuanAreaList = [{areaName: "全部", id: ""}];
          this.yinchuanAreaList = [...this.yinchuanAreaList, ...res.data.result];
          // this.yinchuanAreaName2 = this.yinchuanAreaList[0].areaName;
          // this.yinchuanAreaId2 = this.yinchuanAreaList[0].id;
          // console.log(this.yinchuanAreaList);
        } else {
          this.$message.error(res.data.message);
        }
      },
      // 定时刷新数据函数
      dataRefreh() {
        // 计时器正在进行中，退出函数
        if (this.intervalId != null) {
          return;
        }
        // 计时器为空，操作
        this.intervalId = setInterval(() => {
          // console.log("刷新" + new Date());
          this.loadDataRegularly();
        }, 20000);
      },
      // 停止定时器
      clear() {
        clearInterval(this.intervalId); //清除计时器
        this.intervalId = null; //设置为null
      },
      // 进入页面第一次加载
      async fristLoad() {
        if (this.allDataShow && this.isSuper == '是'){
          // this.loadingAll = true;
          await this.getAllVisitCase();
        }
        if (this.antingShow){
          // this.loadingAnting = true;
          await this.getAntingVisitCase();
        }
        if (this.yinchuanShow){
          // this.loadingTaicang = true;
          await this.getYinchuanVisitCase();
        }
        if (this.taicangShow){
          // this.loadingYinchuan = true;
          await this.getTaiCangVisitCase();
        }
        if (this.xiangtanShow){
          await this.getXiangtanVisitCase();
        }
        if (this.nanjingShow){
          await this.getNanjingVisitCase();
        }
        if (this.suzhouShow){
          await this.getSuzhouVisitCase();
        }
        this.loadingAllPosition = false;

        if (this.allBaseData.length != 0) {
          this.pieChartAll();
        }
        if (this.antingData.length != 0) {
          this.pieChartAnting()
        }
        if (this.yinchuanData.length != 0) {
          this.pieChartYinchuan()
        }
        if (this.taicangData.length != 0) {
          this.pieChartTaiCang()
        }
        if (this.xiangtanData.length != 0) {
          this.pieChartXiangtan()
        }
        if (this.nanjingData.length != 0) {
          this.pieChartNanjing()
        }
        if (this.suzhouData.length != 0) {
          this.pieChartSuzhou()
        }
      },
      // 定时加载数据
      async loadDataRegularly() {
        if (this.allDataShow && this.isSuper == '是'){
          await this.getAllVisitCase();
        }
        if (this.antingShow){
          await this.getAntingVisitCase();
        }
        if (this.taicangShow){
          await this.getTaiCangVisitCase();
        }
        if (this.yinchuanShow){
          await this.getYinchuanVisitCase();
        }
        if (this.xiangtanShow){
          await this.getXiangtanVisitCase();
        }
        if (this.nanjingShow){
          await this.getNanjingVisitCase();
        }
        if (this.suzhouShow){
          await this.getSuzhouVisitCase();
        }

        if (this.allBaseData.length != 0) {
          this.allBaseChart.data(this.allBaseData);
          this.allBaseChart.render();
        }
        if (this.antingData.length != 0) {
          this.antingChart.data(this.antingData);
          this.antingChart.render();
        }
        if (this.yinchuanData.length != 0) {
          this.yinchanChart.data(this.yinchuanData);
          this.yinchanChart.render();
        }
        if (this.taicangData.length != 0) {
          this.taicangChart.data(this.taicangData);
          this.taicangChart.render();
        }
        if (this.xiangtanData.length != 0) {
          this.xiangtanChart.data(this.xiangtanData);
          this.xiangtanChart.render();
        }
        if (this.nanjingData.length != 0) {
          this.nanjingChart.data(this.nanjingData);
          this.nanjingChart.render();
        }
        if (this.suzhouData.length != 0) {
          this.suzhouChart.data(this.suzhouData);
          this.suzhouChart.render();
        }

      },
      // 安亭基地切换区域
      async handleClickAnTing(e) {
        this.antingAreaName = e.item.value;
        this.antingAreaId = e.key;
        this.loadingAnting = true;
        await this.getAntingVisitCase();
        if (this.antingData.length != 0) {
          this.antingChart.data(this.antingData);
          this.antingChart.render();
        }
      },
      // 银川基地切换区域
      async handleClickYinchuan(e) {
        this.yinchuanAreaName2 = e.item.value;
        this.yinchuanAreaId2 = e.key;
        this.loadingYinchuan = true;
        await this.getYinchuanVisitCase();
        if (this.yinchuanData.length != 0) {
          this.yinchanChart.data(this.yinchuanData);
          this.yinchanChart.render();
        }
      },
      // 太仓基地切换区域或门
      async handleClickTaiCang(e) {
        this.taicangAreaName = e.item.value;
        this.taicangAreaId = e.key;
        this.loadingTaicang = true;
        await this.getTaiCangVisitCase();    // 重新获取数据
        if (this.taicangData.length != 0) {
          this.taicangChart.data(this.taicangData);
          this.taicangChart.render();
        }
      },
      // 湘潭基地切换区域
      async handleClickXiangtan(e) {
        this.xiangtanAreaName = e.item.value;
        this.xiangtanAreaId2 = e.key;
        this.loadingXiangtan = true;
        await this.getXiangtanVisitCase();    // 重新获取数据
        if (this.xiangtanData.length != 0) {
          this.xiangtanChart.data(this.xiangtanData);
          this.xiangtanChart.render();
        }
      },
      // 南京基地切换区域
      async handleClickNanjing(e) {
        this.nanjingAreaName = e.item.value;
        this.nanjingAreaId = e.key;
        this.loadingNanjing = true;
        await this.getNanjingVisitCase();    // 重新获取数据
        if (this.nanjingData.length != 0) {
          this.nanjingChart.data(this.nanjingData);
          this.nanjingChart.render();
        }
      },
      // 苏州基地切换区域
      async handleClickSuzhou(e) {
        this.suzhouAreaName = e.item.value;
        this.suzhouAreaId = e.key;
        this.loadingSuzhou = true;
        await this.getSuzhouVisitCase();    // 重新获取数据
        if (this.suzhouData.length != 0) {
          this.suzhouChart.data(this.suzhouData);
          this.suzhouChart.render();
        }
      },

      // 请求安亭基地数据
      async getAntingVisitCase() {
        let params = {
          visitBaseId: 100,
          lx: this.antingAreaId
        };

        let resp = await reservationApi.getStatistics(params);
        if (resp.data.success) {
          this.loadingAnting = false;
          this.antingData = [];
          let respData = resp.data.result;
          this.antingData = respData.areaAndDoor;
          this.antingCount = respData.allCount[0];
          // if (this.antingShow){
          //   if(this.loadedAnting == 1){
          //     this.loadedAnting = 2;
          //     if (this.antingData.length != 0) {
          //       this.pieChartAnting();
          //     }
          //   }else{
          //     if (this.antingData.length != 0) {
          //       this.antingChart.data(this.antingData);
          //       this.antingChart.render();
          //     }
          //   }
          // }
        } else {
          this.loadingAnting = false;
          this.$message.error(resp.data.message);
        }
      },
      // 请求银川基地数据
      async getYinchuanVisitCase() {
        let params = {
          visitBaseId: 102,
          lx: this.yinchuanAreaId2
        };

        let resp = await reservationApi.getStatistics(params);
        // console.log(resp);
        if (resp.data.success) {
          this.yinchuanData = [];
          this.loadingYinchuan = false;
          let respData = resp.data.result;
          this.yinchuanData = respData.areaAndDoor;  //柱状图数据
          this.yinchuanCount = respData.allCount[0];

          // if (this.yinchuanShow){
          //   if(this.loadedYinchuan == 1){
          //     this.loadedYinchuan = 2;
          //     if (this.yinchuanData.length != 0) {
          //       this.pieChartYinchuan();
          //     }
          //   }else{
          //     if (this.yinchuanData.length != 0) {
          //       this.yinchanChart.data(this.yinchuanData);
          //       this.yinchanChart.render();
          //     }
          //   }
          // }
        } else {
          this.loadingYinchuan = false;
          this.$message.error(resp.data.message);
        }
      },
      // 请求太仓基地数据，获取太仓基地数据
      async getTaiCangVisitCase() {
        // this.loading = true;
        let params = {
          visitBaseId: 20003,
          lx: this.taicangAreaId
        };

        let resp = await reservationApi.getStatistics(params);
        // console.log(resp.data);
        if (resp.data.success) {
          this.taicangData = [];
          this.loadingTaicang = false;
          let respData = resp.data.result;
          this.taicangData = respData.areaAndDoor;  //柱状图数据
          // console.log(this.taicangData);
          this.taicnagCount = respData.allCount[0];
          // if (this.taicangData.length != 0) {
          //   this.taicangChart.data(this.taicangData);
          //   this.taicangChart.render();
          // }
          // if (this.taicangShow){
          //   if(this.loadedTaicang == 1){
          //     this.loadedTaicang = 2;
          //     if (this.taicangData.length != 0) {
          //       this.pieChartTaiCang();
          //     }
          //   }else{
          //     if (this.taicangData.length != 0) {
          //       this.taicangChart.data(this.taicangData);
          //       this.taicangChart.render();
          //     }
          //   }
          // }

        } else {
          this.loadingTaicang = false;
          this.$message.error(resp.data.message);
        }
      },
      // 请求湘潭基地数据
      async getXiangtanVisitCase() {
        let params = {
          visitBaseId: 20004,
          lx: this.xiangtanAreaId2
        };

        let resp = await reservationApi.getStatistics(params);
        // console.log(resp);
        if (resp.data.success) {
          this.xiangtanData = [];
          this.loadingXiangtan = false;
          let respData = resp.data.result;
          this.xiangtanData = respData.areaAndDoor;  //柱状图数据
          this.xiangtanCount = respData.allCount[0];

        } else {
          this.loadingXiangtan = false;
          this.$message.error(resp.data.message);
        }
      },
      async getNanjingVisitCase() {
        let params = {
          visitBaseId: 20005,
          lx: this.nanjingAreaId
        };

        let resp = await reservationApi.getStatistics(params);
        // console.log(resp);
        if (resp.data.success) {
          this.nanjingData = [];
          this.loadingNanjing = false;
          let respData = resp.data.result;
          this.nanjingData = respData.areaAndDoor;  //柱状图数据
          this.nanjingCount = respData.allCount[0];
        } else {
          this.loadingNanjing = false;
          this.$message.error(resp.data.message);
        }
      },
      async getSuzhouVisitCase() {
        let params = {
          visitBaseId: 20006,
          lx: this.suzhouAreaId
        };

        let resp = await reservationApi.getStatistics(params);
        // console.log(resp);
        if (resp.data.success) {
          this.suzhouData = [];
          this.loadingSuzhou = false;
          let respData = resp.data.result;
          this.suzhouData = respData.areaAndDoor;  //柱状图数据
          this.suzhouCount = respData.allCount[0];
        } else {
          this.loadingSuzhou = false;
          this.$message.error(resp.data.message);
        }
      },

      // 请求所有基地数据
      async getAllVisitCase() {
        // this.loading = true;
        let params = {
          visitBaseId: "",
          lx: ""
        };
        let resp = await reservationApi.getStatistics(params);
        // console.log(resp.data);
        if (resp.data.success) {
          this.allBaseData = [];
          this.loadingAll = false;
          let respData = resp.data.result;
          this.allCount = respData.allCount[0];

          if (this.allCount.allCountNum != 0){
            this.allBaseData.push({
              type: '访问中',
              value: this.allCount.notOutCount
            });
            this.allBaseData.push({
              type: '访问结束',
              value: this.allCount.endOfVisit
            });
            this.allBaseData.push({
              type: '未到访',
              value: this.allCount.notVisited
            });
          }

          // if (this.allDataShow){
          //   if(this.loadedAll == 1){
          //     this.loadedAll = 2;
          //     if (this.allBaseData.length != 0) {
          //       this.pieChartAll();
          //     }
          //   }else{
          //     if (this.allBaseData.length != 0) {
          //       this.allBaseChart.data(this.allBaseData);
          //       this.allBaseChart.render();
          //     }
          //   }
          // }

          // allCountNum: 119   今日预约人数
          // endOfVisit: 38   访问结束
          // notOutCount: 14   访问中
          // notVisited: 67   未到访

        } else {
          this.loadingAll = false;
          this.$message.error(resp.data.message);
        }
      },
      // 所有访客数据饼图
      pieChartAll() {
        // const allBaseDatas = [
        //   { type: '访问中', value: 10 },
        //   { type: '访问结束', value: 11 },
        //   { type: '未到访', value: 15 },
        // ];
        const chart = new Chart({
          container: 'container',
          autoFit: true,
          height: 500,
        });
        this.allBaseChart = chart;
        chart.data(this.allBaseData);
        chart.coordinate('theta', {
          radius: 0.75,
          innerRadius: 0.8,
        });
        chart.tooltip(false);
        chart
          .interval()
          .adjust('stack')
          .position('value')
          .color('type', ['#0ebc5b', '#F9D236', '#eeeeee'])
          .shape('slice-shape');

        chart.render();
      },
      // 安亭访客数据饼图
      pieChartAnting() {
        const chart = new Chart({
          container: 'antingContainer',
          autoFit: true,
          height: 300,
          padding: [20, 20, 90, 30],
        });
        this.antingChart = chart;
        chart.data(this.antingData);
        chart.scale('count', {
          nice: true,
        });
        chart.axis('areaOrDoor', {
          tickLine: null,
          label: {
            autoRotate: true,
            autoHide: false, // 取消自动隐藏label
            formatter(text) {
              // 字符太长添加省略号
              return text.length > 6 ? `${text.slice(0, 6)}...` : text;
            }
          },
        });

        chart.axis('count', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });
        chart.tooltip(false);
        chart.legend(true);
        chart.theme('newTheme')
        chart
          .interval()
          .position('areaOrDoor*count')
          .color('name', ['#0ebc5b', '#F9D236', '#eeeeee'])
          .label('count', {
            offset: 10,
          }).adjust([
          {
            type: 'dodge',
            marginRatio: 0,
          },
        ]);
        chart.interaction('active-region');
        // 捕捉axis-label的mouseenter事件创建DOM
        chart.on('axis-label:mouseenter', ev => {
          // 判断是否创建过div框,如果创建过就不再创建了
          const warp = document.getElementById('antv-text-extension');
          if (!warp) {
            const div = document.createElement("div")
            div.id = 'antv-text-extension';
            document.body.append(div);
          }
          warp.style = 'position: absolute; color: #fff; background: #393C41; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.10); font-size: 12px; padding: 5px; display: inline; z-index: 100; max-width: 160px;'
          warp.innerHTML = (ev.target.cfg.delegateObject.item.name);

          document.addEventListener('mousemove', ev => {
            const xx = ev.pageX - 30;
            const yy = ev.pageY + 20;
            warp.style.top = yy + 'px';
            warp.style.left = xx + 'px';
          })

          // 捕捉axis-mouseleave隐藏DOM
          chart.on('axis-label:mouseleave', () => {
            warp.style.display = 'none'
          })
        })
        chart.render();
      },
      // 银川访客数据饼图
      pieChartYinchuan() {

        const chart = new Chart({
          container: 'containerYinchuan2',
          autoFit: true,
          height: 300,
          padding: [20, 20, 90, 30],
        });
        this.yinchanChart = chart;
        chart.data(this.yinchuanData);
        chart.scale('count', {
          nice: true,
        });
        chart.axis('areaOrDoor', {
          tickLine: null,
          label: {
            autoRotate: true,
            autoHide: false, // 取消自动隐藏label
            formatter(text) {
              // 字符太长添加省略号
              return text.length > 6 ? `${text.slice(0, 6)}...` : text;
            }
          },
        });
        chart.axis('count', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });
        // chart.tooltip({
        //   showMarkers: false,
        //   shared: true,
        // });
        chart.tooltip(false);
        chart.legend(true);
        chart.theme('newTheme')
        chart
          .interval()
          .position('areaOrDoor*count')
          .color('name', ['#0ebc5b', '#F9D236', '#eeeeee'])
          .label('count', {
            offset: 10,
          }).adjust([
          {
            type: 'dodge',
            marginRatio: 0,
          },
        ]);
        chart.interaction('active-region');
        // 捕捉axis-label的mouseenter事件创建DOM
        chart.on('axis-label:mouseenter', ev => {
          // 判断是否创建过div框,如果创建过就不再创建了
          const warp = document.getElementById('antv-text-extension');
          if (!warp) {
            const div = document.createElement("div")
            div.id = 'antv-text-extension';
            document.body.append(div);
          }
          warp.style = 'position: absolute; color: #fff; background: #393C41; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.10); font-size: 12px; padding: 5px; display: inline; z-index: 100; max-width: 160px;'
          warp.innerHTML = (ev.target.cfg.delegateObject.item.name);

          document.addEventListener('mousemove', ev => {
            const xx = ev.pageX - 30;
            const yy = ev.pageY + 20;
            warp.style.top = yy + 'px';
            warp.style.left = xx + 'px';
          })

          // 捕捉axis-mouseleave隐藏DOM
          chart.on('axis-label:mouseleave', () => {
            warp.style.display = 'none'
          })
        })
        chart.render();
      },
      // 湘潭访客数据饼图
      pieChartXiangtan() {
        const chart = new Chart({
          container: 'containerXiangtan',
          autoFit: true,
          height: 300,
          padding: [20, 20, 90, 30],
        });
        this.xiangtanChart = chart;
        chart.data(this.xiangtanData);
        chart.scale('count', {
          nice: true,
        });
        chart.axis('areaOrDoor', {
          tickLine: null,
          label: {
            autoRotate: true,
            autoHide: false, // 取消自动隐藏label
            formatter(text) {
              // 字符太长添加省略号
              return text.length > 6 ? `${text.slice(0, 6)}...` : text;
            }
          },
        });
        chart.axis('count', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });
        // chart.tooltip({
        //   showMarkers: false,
        //   shared: true,
        // });
        chart.tooltip(false);
        chart.legend(true);
        chart.theme('newTheme')
        chart
          .interval()
          .position('areaOrDoor*count')
          .color('name', ['#0ebc5b', '#F9D236', '#eeeeee'])
          .label('count', {
            offset: 10,
          }).adjust([
          {
            type: 'dodge',
            marginRatio: 0,
          },
        ]);
        chart.interaction('active-region');
        // 捕捉axis-label的mouseenter事件创建DOM
        chart.on('axis-label:mouseenter', ev => {
          // 判断是否创建过div框,如果创建过就不再创建了
          const warp = document.getElementById('antv-text-extension');
          if (!warp) {
            const div = document.createElement("div")
            div.id = 'antv-text-extension';
            document.body.append(div);
          }
          warp.style = 'position: absolute; color: #fff; background: #393C41; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.10); font-size: 12px; padding: 5px; display: inline; z-index: 100; max-width: 160px;'
          warp.innerHTML = (ev.target.cfg.delegateObject.item.name);

          document.addEventListener('mousemove', ev => {
            const xx = ev.pageX - 30;
            const yy = ev.pageY + 20;
            warp.style.top = yy + 'px';
            warp.style.left = xx + 'px';
          })

          // 捕捉axis-mouseleave隐藏DOM
          chart.on('axis-label:mouseleave', () => {
            warp.style.display = 'none'
          })
        })
        chart.render();
      },
      // 南京访客数据饼图
      pieChartNanjing() {
        const chart = new Chart({
          container: 'containerNanjing',
          autoFit: true,
          height: 300,
          padding: [20, 20, 90, 30],
        });
        this.nanjingChart = chart;
        chart.data(this.nanjingData);
        chart.scale('count', {
          nice: true,
        });
        chart.axis('areaOrDoor', {
          tickLine: null,
          label: {
            autoRotate: true,
            autoHide: false, // 取消自动隐藏label
            formatter(text) {
              // 字符太长添加省略号
              return text.length > 6 ? `${text.slice(0, 6)}...` : text;
            }
          },
        });
        chart.axis('count', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });
        // chart.tooltip({
        //   showMarkers: false,
        //   shared: true,
        // });
        chart.tooltip(false);
        chart.legend(true);
        chart.theme('newTheme')
        chart
          .interval()
          .position('areaOrDoor*count')
          .color('name', ['#0ebc5b', '#F9D236', '#eeeeee'])
          .label('count', {
            offset: 10,
          }).adjust([
          {
            type: 'dodge',
            marginRatio: 0,
          },
        ]);
        chart.interaction('active-region');
        // 捕捉axis-label的mouseenter事件创建DOM
        chart.on('axis-label:mouseenter', ev => {
          // 判断是否创建过div框,如果创建过就不再创建了
          const warp = document.getElementById('antv-text-extension');
          if (!warp) {
            const div = document.createElement("div")
            div.id = 'antv-text-extension';
            document.body.append(div);
          }
          warp.style = 'position: absolute; color: #fff; background: #393C41; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.10); font-size: 12px; padding: 5px; display: inline; z-index: 100; max-width: 160px;'
          warp.innerHTML = (ev.target.cfg.delegateObject.item.name);

          document.addEventListener('mousemove', ev => {
            const xx = ev.pageX - 30;
            const yy = ev.pageY + 20;
            warp.style.top = yy + 'px';
            warp.style.left = xx + 'px';
          })

          // 捕捉axis-mouseleave隐藏DOM
          chart.on('axis-label:mouseleave', () => {
            warp.style.display = 'none'
          })
        })
        chart.render();
      },
      // 苏州访客数据饼图
      pieChartSuzhou() {
        const chart = new Chart({
          container: 'containerSuzhou',
          autoFit: true,
          height: 300,
          padding: [20, 20, 90, 30],
        });
        this.suzhouChart = chart;
        chart.data(this.suzhouData);
        chart.scale('count', {
          nice: true,
        });
        chart.axis('areaOrDoor', {
          tickLine: null,
          label: {
            autoRotate: true,
            autoHide: false, // 取消自动隐藏label
            formatter(text) {
              // 字符太长添加省略号
              return text.length > 6 ? `${text.slice(0, 6)}...` : text;
            }
          },
        });
        chart.axis('count', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });
        // chart.tooltip({
        //   showMarkers: false,
        //   shared: true,
        // });
        chart.tooltip(false);
        chart.legend(true);
        chart.theme('newTheme')
        chart
          .interval()
          .position('areaOrDoor*count')
          .color('name', ['#0ebc5b', '#F9D236', '#eeeeee'])
          .label('count', {
            offset: 10,
          }).adjust([
          {
            type: 'dodge',
            marginRatio: 0,
          },
        ]);
        chart.interaction('active-region');
        // 捕捉axis-label的mouseenter事件创建DOM
        chart.on('axis-label:mouseenter', ev => {
          // 判断是否创建过div框,如果创建过就不再创建了
          const warp = document.getElementById('antv-text-extension');
          if (!warp) {
            const div = document.createElement("div")
            div.id = 'antv-text-extension';
            document.body.append(div);
          }
          warp.style = 'position: absolute; color: #fff; background: #393C41; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.10); font-size: 12px; padding: 5px; display: inline; z-index: 100; max-width: 160px;'
          warp.innerHTML = (ev.target.cfg.delegateObject.item.name);

          document.addEventListener('mousemove', ev => {
            const xx = ev.pageX - 30;
            const yy = ev.pageY + 20;
            warp.style.top = yy + 'px';
            warp.style.left = xx + 'px';
          })

          // 捕捉axis-mouseleave隐藏DOM
          chart.on('axis-label:mouseleave', () => {
            warp.style.display = 'none'
          })
        })
        chart.render();
      },


      // 太仓访客数据饼图
      pieChartTaiCang() {
        const chart = new Chart({
          container: 'containerTaiCang',
          autoFit: true,
          height: 300,
          padding: [20, 20, 90, 30],
        });
        this.taicangChart = chart;
        chart.data(this.taicangData);
        chart.scale('count', {
          nice: true,
        });
        chart.axis('areaOrDoor', {
          tickLine: null,
          label: {
            autoRotate: true,
            autoHide: false, // 取消自动隐藏label
            formatter(text) {
              // 字符太长添加省略号
              return text.length > 6 ? `${text.slice(0, 6)}...` : text;
            }
          },
        });

        chart.axis('count', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });
        // chart.tooltip({
        //   showMarkers: false,
        //   shared: true,
        // });
        chart.tooltip(false);
        chart.legend(true);
        chart.theme('newTheme')
        chart
          .interval()
          .position('areaOrDoor*count')
          .color('name', ['#0ebc5b', '#F9D236', '#eeeeee'])
          .label('count', {
            offset: 10,
          }).adjust([
          {
            type: 'dodge',
            marginRatio: 0,
          },
        ]);
        chart.interaction('active-region');
        // 捕捉axis-label的mouseenter事件创建DOM
        chart.on('axis-label:mouseenter', ev => {
          // 判断是否创建过div框,如果创建过就不再创建了
          const warp = document.getElementById('antv-text-extension');
          if (!warp) {
            const div = document.createElement("div")
            div.id = 'antv-text-extension';
            document.body.append(div);
          }
          warp.style = 'position: absolute; color: #fff; background: #393C41; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.10); font-size: 12px; padding: 5px; display: inline; z-index: 100; max-width: 160px;'
          warp.innerHTML = (ev.target.cfg.delegateObject.item.name);

          document.addEventListener('mousemove', ev => {
            const xx = ev.pageX - 30;
            const yy = ev.pageY + 20;
            warp.style.top = yy + 'px';
            warp.style.left = xx + 'px';
          })

          // 捕捉axis-mouseleave隐藏DOM
          chart.on('axis-label:mouseleave', () => {
            warp.style.display = 'none'
          })
        })
        chart.render();
      },


    },
  }
</script>
<style>
  .sflTitle {
    font-size: 28px;
    margin: 0 0 10px 0;
    text-align: center;
  }
</style>
